<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#a{
				width: 500px;
				height: 500px;
				border:5px solid black;
			}
			#b{
				width: 300px;
				height: 300px;
				border: 5px solid blue;
			}
			#c{
				width: 100px;
				height: 100px;
				border:5px solid red;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c"></div>
			</div>
		</div>
	</body>
</html>
<script>
	//事件绑定

	//获取元素
	var aDiv = document.getElementById("a");
	var bDiv = document.getElementById("b");
	var cDiv = document.getElementById("c");
/*
	cDiv.onclick = function(){
		console.log(666);
	};
	//普通绑定事件后面事件会覆盖前面事件
	cDiv.onclick = function(){
		console.log(888);
	};*/

   //事件流：事件执行的顺序
   //冒泡阶段：小范围到大范围
   //捕获阶段：大范围向小范围执行
   //第一个参数：事件类型
   //第二个参数：回调函数
   //第三个参数：默认为false，事件触发在冒泡阶段，如果为true，事件触发在捕获阶段



	/*cDiv.addEventListener("click",function(e){
		console.log("点击事件1");

	},false);
	cDiv.addEventListener("click",function(e){
		console.log("点击事件2");

	},false);*/

	//ie8以下绑定事件
	//绑定事件
	//attachEvent("on" + type,listener);
	//移除事件
	//dettachEvent("on" + type,listener);


	//兼容写法
	function addWGEvent(eventType,func,bubble){
		if(this.addEventListener){
          this.addEventListener(eventType,func,bubble ? bubble : false);
		}else {
			//on 和attach同在
			this.attachEvent("on" + eventType,func);
			

		}
	}
	HTMLElement.prototype.addWGEvent = addWGEvent;
	aDiv.addWGEvent("click", function(){
		console.log("00000");
	});




</script>